<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>安全泰达</title>
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./css/mainPage.css" />
	</head>
	<body>
		<div class="ET_header" id="ET_header">
		    <div class="title">
		        事项清单
		    </div>
		</div>
		<div class="ET_container">
			<div class="matter_list">
				<div class="list_title">
					事项清单
				</div>
				<div class="list_detail">
					<div class="list_main">
						<div class="item_head" >
							<div class="item_name" onclick="getItem(this)" data-id="1" data-index="0">
								危险化学品经营许可
							</div>
							<div class="right_arrow showItem" onclick="getItem(this)" data-id="1" data-index="0">
								<img src="image/right_arrow.png" alt="" />
							</div>
							<div class="down_arrow" onclick="closeItem(this)" data-index="0">
								<img src="image/down_arrow.png" alt="" />
							</div>
						</div>
						<ul class="some_item">
							<li onclick="checkItemInfo(this)" data-value="value1">
								<div class="item_label">
									危险化学品经营许可（变更）
								</div>
								<div class="item_type">
									<span>部门：</span>
									<span>办件量：件</span>
								</div>
							</li>
							<li onclick="checkItemInfo(this)" data-value="value2">
								<div class="item_label">
									危险化学品经营许可（核发、延期换证）
								</div>
								<div class="item_type">
									<span>部门：</span>
									<span>办件量：件</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="./script/jquery.min.js"></script>
		<script src="./script/api.js"></script>
		<script>
			// 一级标题
			function getFirstItemName(data){
				var res_GetEmergencyMatterMaster = GetEmergencyMatterMaster()
				console.log("一级标题",res_GetEmergencyMatterMaster)
				$('.list_detail').empty()
				if(res_GetEmergencyMatterMaster.code == 200){
					let firstList = '';
					$.each(res_GetEmergencyMatterMaster.data, function(index, item){
						firstList+='<div class="list_main"><div class="item_head"><div class="item_name" onclick="getItem(this)" data-id="'+item.pM_ID
						+'" data-index="'+index
						+'">'+item.pM_NAME
						+'</div><div class="right_arrow showItem" onclick="getItem(this)" data-id="'+item.pM_ID
						+'" data-index="'+index
						+'"><img src="image/right_arrow.png" alt="" /></div><div class="down_arrow" data-index="'+index
						+'" onclick="closeItem(this)"><img src="image/down_arrow.png" alt="" /></div></div><ul class="some_item"></ul></div>'	
					})
					$('.list_detail').append(firstList);
					openPage(res_GetEmergencyMatterMaster.data[0].pM_ID);
				}
			}
			getFirstItemName();
			
			function openPage(data){
				let pM_ID = data;
				let index = '0';
				$('.list_main').eq(index).find('.right_arrow').removeClass('showItem')
				$('.list_main').eq(index).find('.down_arrow').addClass('showItem')
				$('.list_main').eq(index).find(".some_item").show()
				GetItemList(pM_ID,index)
			}

			// 打开二级标题
			function getItem(obj){
				let id = $(obj).attr('data-id');
				let index = $(obj).attr('data-index');
				if($('.list_main').eq(index).find('.right_arrow').hasClass('showItem')){
					$('.list_main').eq(index).find('.right_arrow').removeClass('showItem')
					$('.list_main').eq(index).find('.down_arrow').addClass('showItem')
					GetItemList(id,index)
				}else{
					$('.list_main').eq(index).find('.right_arrow').addClass('showItem')
					$('.list_main').eq(index).find('.down_arrow').removeClass('showItem')
					$('.list_main').eq(index).find(".some_item").hide()
				}
			}

			// 二级标题内容显示
			function GetItemList(id,index){
				console.log(id,index);
				var res_GetEmergencyMatterInfo = GetEmergencyMatterInfo(id)
				console.log('二级标题',res_GetEmergencyMatterInfo)
				if(res_GetEmergencyMatterInfo.code == 200){
					let secondList = '';
					$.each(res_GetEmergencyMatterInfo.data,function(index,item){
						secondList += '<li onclick="checkItemInfo(this)" data-value="'+item.pR_ID
						+'"><div class="item_label">'+item.pR_NAME
						+'</div><div class="item_type"><span>部门：'+item.dT_NAME
						+'</span><span>办件量：'+item.handles
						+'件</span></div></li>'
					})
					$('.list_main').eq(index).find(".some_item").show()
					$('.list_main').eq(index).find(".some_item").empty()
					$('.list_main').eq(index).find('.some_item').append(secondList);
				}
			}

			// 关闭二级标题
			function closeItem(obj){
				let index = $(obj).attr('data-index');
				console.log(index)
				$('.list_main').eq(index).find('.right_arrow').addClass('showItem')
				$('.list_main').eq(index).find('.down_arrow').removeClass('showItem')
				$('.list_main').eq(index).find(".some_item").hide()
			}

			// 二级标题跳转至
			function checkItemInfo(obj){
				let value = $(obj).attr('data-value');
				window.location.href='./zcdxDetail.html?value='+value
			}

		</script>
	</body>
</html>